<template>


    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="() => { $router.push('/home/cla') }" />

        <div v-for="item in cartdata">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name"
                    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                    <template #thumb>
                        <div class="fxk">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                        </div>
                        <img style="width: 70px;height: 70px;margin-left: 40px;" :src="item.goods.goods_big_logo"
                            alt="">
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button @click="delcart(item.id)" square text="删除" type="danger" class="delete-button" style="height: 100%;"/>
                </template>

            </van-swipe-cell>
        </div>
        <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedcart">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartdata = ref([])
const cart = () => {
    let username = localStorage.getItem('username')
    cartdata.value = store.carts.filter(item => item.username == username)
    console.log(cartdata);

}
cart()
const delcart=(id)=>{
    console.log(id);
    
    store.carts=store.carts.filter(item=>item.id!=id)
    cart()
}
const allprice=computed(()=>{
    let allprice=0
    let cart=cartdata.value.filter(item=>item.checked)
    cart.forEach=((item=>{
        allprice+=item.number*item.goods.goods_price
    }))
    return allprice*100
})
const checkedcart=computed({
    get(){
        if(cartdata.value.length==0){
            return false
        }
        else{
            return cartdata.value.every(item=>item.checked)
        }
    },
    set(val){
        console.log(val);
        cartdata.value.forEach(item=>item.checked=val)
        
    }
})
import { useRouter } from 'vue-router'
let router=useRouter()
const onSubmit=()=>{
    router.push('/dd')
    
}
</script>

<style>
.fxk{

   line-height: 10px;
    display: inline-block;
}
</style>